<!DOCTYPE html>
<html>
<head>
<title>Shear Deformation Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style and settings to match the hand-drawn look
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2.5; // Thicker lines for a pen-like feel
ctx.font = '22px serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Parameters for the diagram's geometry and position
const cx = 80;    // Diagram origin x-coordinate on canvas
const cy = 350;   // Diagram origin y-coordinate on canvas
const L = 180;    // Height 'l' of the block in pixels
const W_block = 250; // Width of the block in pixels
const U = 50;     // Horizontal displacement 'u' in pixels
const y_start = 80; // Starting y-position of the block from the diagram origin

// Helper function to draw an arrow
function drawArrow(fromx, fromy, tox, toy) {
    const headlen = 12; // Length of the arrowhead
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
}

// 1. Draw Coordinate Axes
drawArrow(cx - 40, cy, cx + y_start + W_block + U + 90, cy);
ctx.fillText('y', cx + y_start + W_block + U + 105, cy);
drawArrow(cx, cy + 50, cx, cy - L - 60);
ctx.fillText('x', cx, cy - L - 75);

// 2. Draw Deformed Block and Fixed Base
// Define the four corners of the parallelogram
const p1 = { x: cx + y_start, y: cy }; // bottom-left
const p2 = { x: cx + y_start + W_block, y: cy }; // bottom-right
const p3 = { x: cx + y_start + W_block + U, y: cy - L }; // top-right
const p4 = { x: cx + y_start + U, y: cy - L }; // top-left

// Draw the three visible solid sides of the block
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p4.x, p4.y); // Left side
ctx.lineTo(p3.x, p3.y); // Top side
ctx.lineTo(p2.x, p2.y); // Right side
ctx.stroke();

// Draw the hatching for the fixed surface
ctx.save();
ctx.lineWidth = 2;
for (let i = p1.x - 10; i < p2.x + 10; i += 15) {
    ctx.beginPath();
    ctx.moveTo(i, cy);
    ctx.lineTo(i - 10, cy + 10);
    ctx.stroke();
}
ctx.restore();


// 3. Draw Labels and Annotations

// Label 'l' on the x-axis
ctx.beginPath();
ctx.moveTo(cx - 5, cy - L);
ctx.lineTo(cx + 5, cy - L);
ctx.stroke();
ctx.fillText('l', cx - 25, cy - L);

// Force 'F' arrow and label
drawArrow(p3.x, p3.y, p3.x + 70, p3.y);
ctx.fillText('F', p3.x + 88, p3.y);

// Displacement 'u' annotation
// Dotted line showing the horizontal shift
ctx.save();
ctx.setLineDash([4, 4]);
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(p2.x, p3.y);
ctx.lineTo(p3.x, p3.y);
ctx.stroke();
ctx.restore();

// Dimension line and label for 'u'
const y_u_line = p3.y - 15;
ctx.beginPath();
ctx.moveTo(p2.x, y_u_line);
ctx.lineTo(p3.x, y_u_line);
ctx.moveTo(p2.x, y_u_line - 5);
ctx.lineTo(p2.x, y_u_line + 5);
ctx.moveTo(p3.x, y_u_line - 5);
ctx.lineTo(p3.x, y_u_line + 5);
ctx.stroke();
ctx.fillText('u', (p2.x + p3.x) / 2, y_u_line - 15);

// Shear angle 'φ'
const r_phi = 30;
const startAngle = Math.atan2(-L, U);
const endAngle = -Math.PI / 2;
const midAngle = (startAngle + endAngle) / 2;

// Right side angle arc and label
ctx.beginPath();
ctx.arc(p2.x, p2.y, r_phi, startAngle, endAngle);
ctx.stroke();
ctx.fillText('\u03C6', p2.x + (r_phi-12) * Math.cos(midAngle), p2.y + (r_phi-12) * Math.sin(midAngle));

// Left side angle arc and label
ctx.beginPath();
ctx.arc(p1.x, p1.y, r_phi, startAngle, endAngle);
ctx.stroke();
ctx.fillText('\u03C6', p1.x + (r_phi-12) * Math.cos(midAngle), p1.y + (r_phi-12) * Math.sin(midAngle));

// 4. Draw Caption
ctx.font = '20px serif';
ctx.fillText('Fig. 2.77.', canvas.width / 2, cy + 80);

</script>
</body>
</html>